import styled from 'styled-components'
import Border1px from '../style/Border1px'

const CatelistContainer = styled.div`

display:flex;

  >div:first-child{
    width:1.8rem;
    background:#f3f3f3;
    min-height:12rem;
    ul {
      li{
        list-style:none;
        line-height:0.96rem;
        text-align:center;
      }
    }
  }

  >div:last-child{
    flex:1;
    background:white;
    ul {
      display:flex;
      flex-wrap:wrap;
      li {
        width:33.333%;
        list-style:none;
        line-height:0.9rem;
        text-align:center;
      }
    }
  }

  .active{
    background:white;
    position:relative;
    color:#ee7530;
    &::before{
        content:"";
        position:absolute;
        bottom:0;
        left:0.6rem;
        height:0.02rem;
        width:0.6rem;
        background:#ee7530;
        pointer-events:none;
    }
  }

`

export default Border1px(CatelistContainer,'0.01rem 0 0 0','#666666');